/*
  学习目标：复用逻辑-三种方式-小结
    1.✅ 自定义hooks
      1.1 本质上是一个函数, 以useXxx命名
      1.2 函数内, 可以使用其它hooks
      1.3 函数内, 封装数据和逻辑
      1.4 通过多次调用, 可以复用逻辑

    2.🔔 hoc
      2.1 本质上是一个普通函数
      2.2 函数内, 定义了一个组件, 内置组件内封装逻辑
      2.3 函数的参数, 接收一个组件, 作为内置组件的子组件
      2.4 内置组件, 给参数组件, 通过父传子, 传递逻辑
      2.5 函数返回内置组件
    缺点:
      1. 实现复杂
      2. 增加组件嵌套结构

    3.🔔 renderProps 
      3.1 本质上, 是一个组件
      3.2 组件内, 封装逻辑
      3.3 props接收一个render属性, render属性是一个函数， render函数返回jsx
      3.4 render函数的参数, 是内部封装的逻辑
    缺点:
      1. 实现复杂
      2. 增加组件嵌套结构
*/
import React from "react";
import { logMouse } from "./06-复用组件逻辑-hoc/hoc/logMouse";
import { RenderMouse } from "./07-复用逻辑-renderProps/renderProps/RenderMouse";

const MyFooter = logMouse(Footer);

export default function App() {
  return (
    <div>
      <RenderMouse
        render={({ mouse, handleMouseMove }) => {
          return <Header mouse={mouse} handleMouseMove={handleMouseMove} />;
        }}
      />
      <MyFooter />
    </div>
  );
}

function Header({ mouse, handleMouseMove }) {
  return (
    <div onMouseMove={handleMouseMove}>
      <h1>
        x: {mouse.x} - y: {mouse.y}
      </h1>
      <RenderMouse render={() => <FooterChild />} />
    </div>
  );
}

function Footer({ mouse, handleMouseMove }) {
  const MyHeaderChild = logMouse(FooterChild);

  return (
    <h1 onMouseMove={handleMouseMove}>
      Footer- x:{mouse.x} -y:{mouse.y}
      <MyHeaderChild />
    </h1>
  );
}

function FooterChild(params) {}
